import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableOpacity, ImageBackground, Image, FlatList, StatusBar, TextInput, ScrollView, Picker} from 'react-native';
import { base } from "../../../../assets/style";
import LinearGradient from "react-native-linear-gradient";
import ReactNativePickerSelect from 'react-native-picker-select'

type Props = {};
export default class MinerDetail extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: '详情',
            headerStyle: {
            },
            headerTintColor: '#0f0f0f',
            headerBackTitle: null
        }
    }
    constructor() {
        super();
        this.state = {
            bind: true
        }
    }
    render() {
            return (
                <View style={[base.flex_1, base.bg_white, base.content_container, { marginTop: 20 }]}>
                    <View style={[base.bg_gray, { position: 'relative', height: 160, borderRadius: 5, marginBottom: 20 }]}>
                        <Image style={[{
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            width: '100%',
                            height: '100%',
                            borderRadius: 5
                        }]} source={require('@images/mine/bg_miner.jpeg')}/>
                        <View style={[base.content_container, base.flex_col_between, base.flex_1]}>
                            <View style={[{width: '100%'}]}>
                                <View style={[base.flex_row_between, { paddingTop: 15 }]}>
                                    <View><Text style={[base.color_white, { fontSize: 16 }]}>矿机编号</Text></View>
                                    <View style={[{ borderRadius: 3, borderColor: '#fff', borderWidth: 1, paddingVertical: 3, paddingHorizontal: 5}]}><Text style={[base.color_white]}>挖矿中</Text></View>
                                </View>
                                <View style={{ paddingVertical: 3 }}><Text style={[base.color_white]}>8vf9d0-vi98</Text></View>
                            </View>
                            <View style={[{width: '100%'}]}>
                                <View><Text style={[base.color_white, { fontSize: 16 }]}>开启时间</Text></View>
                                <View><Text style={[base.color_white, { paddingVertical: 3 }]}>2018-10-31 12:00</Text></View>
                            </View>
                            <View style={[base.flex_row_between, { paddingBottom: 10, width: '100%' }]}>
                                <View><Text style={[base.color_white, { fontSize: 16 }]}>累计收入</Text></View>
                                <View><Text style={[base.color_white, { fontSize: 26 }]}>100 FCC</Text></View>
                            </View>
                        </View>
                    </View>
                    <View style={[base.flex_1]}>
                        <View style={[base.flex_row_between, { paddingVertical: 15, marginTop: 10, borderColor: '#eee', borderBottomWidth: 1, borderTopWidth: 1 }]}>
                            <View style={[base.flex_1, base.flex_row_center]}><Text style={[ base.color_gray, { fontSize: 14 } ]}>时间</Text></View>
                            <View style={[base.flex_1, base.flex_row_center]}><Text style={[ base.color_gray, { fontSize: 14 } ]}>FCC挖矿</Text></View>
                        </View>
                        <FlatList
                            data={[
                                {
                                    key: 'a',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                                {
                                    key: 'b',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                                {
                                    key: 'c',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                                {
                                    key: 'd',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                                {
                                    key: 'e',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                                {
                                    key: 'f',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                                {
                                    key: 'g',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                            ]}
                            renderItem={
                                ({item}) => {
                                    return (
                                        <View style={[base.flex_row_between, { paddingVertical: 15, borderBottomWidth: 1, borderBottomColor: '#eee' }]}>
                                            <View style={[base.flex_1, base.flex_row_center ]}><Text style={[base.color_gray]}>{item.id}</Text></View>
                                            <View style={[base.flex_1, base.flex_row_center ]}><Text style={[base.color_gray]}>{item.income}</Text></View>
                                        </View>
                                    )
                                }
                            }/>
                    </View>
                </View>
            )
        }
}

const styles = StyleSheet.create({
});
